/** 
{
    click: (item) => {},
    name: "ACTIVE",
    title: "活动",
    count: 0,
    icon: "icon-yonghuguanli",
    color: "rgb(49, 180, 141)",
},

 */
<template>
    <el-row :gutter="20">
        <el-col :span="4" v-for="(item) in Option" :key="item.name"  class="column_Box">
            <div>
                <span class="count" >{{item.count}}</span>
                <el-divider content-position="center"></el-divider>
                <span class="title">{{item.title}}</span>
            </div>
        </el-col>
    </el-row>
</template>
<script>
export default {
    name: "DressesList",
    props:{
        Option: Array
    },
    data(){
        return{
            
        }
    },
    computed: {
        colNum: function(){
            return 24/this.Option.length;
        }
    },
    created(){

    },
    mounted(){    

    },
    methods:{

    }
    
}
</script>
<style lang="scss" scoped>
.column_Box{
    padding: 5px;
    display: block;
    align-items: center;
    flex-direction: column;
    margin: 5px 0;
    text-align: center;
}
.count{    
    display: block;
    margin: 8px 0 15px;
    font-weight: 700;
    font-size: 32px;
    color: #15A0FF;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
 .bg-purple {
    background: #d3dce6;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
</style>